<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>14_Promise的几个关键问题6</title>
</head>

<body>
  <!-- 
    Promise的错误穿透:
      (1) 当使用 Promise的then链式调用时, 可以在最后用catch 指定一个失败的回调,
      (2) 前面任何操作出了错误, 都会传到最后失败的回调中处理了
    备注: 如果不存在 then的链式调用, 就不需要考虑 then的错误穿透.
  -->


  <!-- <script>
    function sendAjax(url, data, index) {
      return new Promise((resolve, reject) => {
        // 实例 xhr
        const xhr = new XMLHttpRequest();
        // 绑定监听
        xhr.onreadystatechange = () => {
          if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) resolve(xhr.response);
            else reject(`第${index}次, 请求出了点问题`);
          }
        };
        // 整理参数
        let str = '';
        for (let key in data) {
          str += `${key}=${data[key]}&`;
        };
        str = str.slice(0, -1);
        // 配置请求
        xhr.open('GET', url + '?' + str);
        xhr.responseType = 'json';
        // 发送请求
        xhr.send();
      });
    };

    // 发送第 1 次请求
    sendAjax('https://api.apiopen.top/api/getShortVideo1', { page: 1, size: 10 }, 1)
    .then(
      (value) => {
        console.log('成功了1:', value); 
        return sendAjax('https://api.apiopen.top/api/getShortVideo', { page: 1, size: 10 }, 2);
      },
    )
    .then(
      (value) => {
        console.log('成功了2:', value);
        return sendAjax('https://api.apiopen.top/api/getShortVideo', { page: 1, size: 10 }, 3);
      },
    )
    .then(
      (value) => { console.log('成功了3:', value) },
    )
    .catch(
      (reason) => { console.log('失败了:', reason) },
    );

    // .catch 负责接收 所有 then抛出的错误.
    // 这一点比较不容易理解: 和之前 07_Promise的API
    // 演示: Promise.prototype.then方法的注意点  理解起来略有冲突.
    // 但是 待了解完源码之后, 就瞬间通透了.
  </script> -->


  <!-- 另一个例子演示错误的穿透 -->
  <script>
    const p = new Promise((resolve,reject) => {
      setTimeout(() => {
        reject(-1);
      }, 1000);
    });

    p.then(
      (value) => { console.log('成功了1: value'); return 'b' },
      // (reason) => { console.log('失败了:', reason) } 
      // 这里虽然没有指定 失败的回调, 但是在 Promise源码底层做出了处理.
      // 将这个失败的回调 抛出了. 例如: reason => { throw reason },
    )
    .then(
      (value) => { console.log('成功了2: value'); return 'c' },
      // (reason) => { console.log('失败了:', reason) } 
      // 这里虽然没有指定 失败的回调, 但是在 Promise源码底层做出了处理.
      // 将这个失败的回调 抛出了. 例如: reason => { throw reason },
    )
    .catch(reason => { console.log('失败了:', reason)} )
  </script>

</body>

</html>